<template>
  <div class="app-container">
    <h1>任务评价</h1>
  <el-table :data="getCompletedTasks" style="width: 100%" border>
        <el-table-column prop="name" label="任务名称" width="180"></el-table-column>
        <el-table-column prop="description" label="任务描述" width="150"></el-table-column>
        <el-table-column prop="startDate" label="开始日期" width="150"></el-table-column>
        <el-table-column prop="endDate" label="结束日期" width="150"></el-table-column>
        <el-table-column prop="assignee" label="负责人" width="150"></el-table-column>
        <el-table-column prop="rating" label="评分" width="150">
          <template slot-scope="scope">
            <el-rate v-model="scope.row.rating" disabled ></el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="comment" label="评论" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.comment || '无' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="evaluator" label="评价人" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.evaluator || '无' }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="small" @click="handleEvaluate(scope.$index, scope.row)"
              style="background-color: #409eff; color: #f0f2f5;">评价</el-button>
          </template>
        </el-table-column>
      </el-table>

    <el-dialog title="任务评价" :visible.sync="dialogVisible" width="40%" center class="custom-dialog">
      <el-form :model="evaluationForm" label-width="100px" ref="evaluationForm">
        <el-form-item label="任务名称">
          <el-input v-model="evaluationForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="评分" prop="rating" :rules="[{ required: true, message: '请选择评分', trigger: 'change' }]">
          <el-rate v-model="evaluationForm.rating" show-text></el-rate>
        </el-form-item>
        <el-form-item label="评论" prop="comment" :rules="[{ required: true, message: '请输入评论', trigger: 'blur' }]">
          <el-input v-model="evaluationForm.comment" type="textarea" placeholder="请填写您的评价"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEvaluation">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>



<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  data() {
    return {
      dialogVisible: false,
      evaluationForm: {
        id: null,
        name: '',
        rating: 0,
        comment: '',
        evaluator: '' // 增加评价人字段
      }
    };
  },
  computed: {
    ...mapGetters('taskEvaluation', ['getCompletedTasks'])
  },
  methods: {
   ...mapActions('taskEvaluation', ['fetchCompletedTasks', 'submitTaskEvaluation']),
    handleEvaluate(index, row) {
      this.evaluationForm.id = row.id;
      this.evaluationForm.name = row.name;
      this.evaluationForm.rating = row.rating || 0;
      this.evaluationForm.comment = row.comment || '';
      this.evaluationForm.evaluator = row.evaluator || ''; // 初始化评价人
      this.dialogVisible = true;
    },
    submitEvaluation() {
      this.$refs['evaluationForm'].validate((valid) => {
        if (valid) {
          this.submitTaskEvaluation({
            taskId: this.evaluationForm.id,
            rating: this.evaluationForm.rating,
            comment: this.evaluationForm.comment,
            evaluator: this.evaluationForm.evaluator
          }).then(() => {
            this.dialogVisible = false;
            this.$message({
              message: '评价成功',
              type: 'success'
            });
            // 清空表单
            this.resetForm();
          }).catch(() => {
            this.$message.error('评价失败，请稍后再试');
          });
        } else {
          this.$message.error('请完成评分和评论');
          return false;
        }
      });
    },
    resetForm() {
      this.evaluationForm.id = null;
      this.evaluationForm.name = '';
      this.evaluationForm.rating = 0;
      this.evaluationForm.comment = '';
      this.evaluationForm.evaluator = '';
    }
  },
  mounted() {
    this.fetchCompletedTasks(); // 在组件挂载时获取已完成的任务列表
  }
};
</script>



<style scoped>
.app-container {
  padding: 20px;
  background-color: #f4f7f9;
  min-height: 100vh;
}

h1 {
  text-align: center;
  color: #303133;
  margin-bottom: 20px;
}

.page-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-weight: 300;
}

.custom-table {
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.custom-dialog .el-dialog {
  border-radius: 10px;
}

.custom-dialog .el-dialog__header {
  background-color: #409eff;
  padding: 16px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: white;
}

.custom-dialog .el-dialog__body {
  padding: 20px;
}

.custom-dialog .el-form-item {
  margin-bottom: 22px;
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  transition: background-color 0.3s, border-color 0.3s;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

/* 添加一些额外的样式 */
.el-button {
  border-radius: 20px;
  padding: 10px 20px;
}

.el-rate {
  margin-top: 8px;
}

.dialog-footer .el-button {
  margin-left: 10px;
}
</style>